{% extends "base_form.html" %}

{% block csscontent %}
    <link href="{{ static('lib/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ static('css/bootstrap-markdown.min.css') }}" rel="stylesheet">
    {#            <link href="{{ static('css/flat-ui.css') }}" rel="stylesheet">#}
    <link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.6/css/fileinput.css" rel="stylesheet">


{% endblock %}



{% macro form_input_clean(field, label_class='', input_class='', input_type='text', placeholder="", attrs=None, kwargs=None) -%}
    {% if field.html_name not in hide_fields %}
        <div class="{{ input_class }}{% if field.errors %} has-error{% endif %}">
            {% if input_type == "date" %}
                {% if kwargs is none %}
                    {% set kwargs = {'max': "9999-12-31"} %}
                {% elif 'max' not in kwargs %}
                    {% set _ = kwargs.update({'max': "9999-12-31"}) %}
                {% endif %}
            {% endif %}
            {{ input_widget(input_type, field.html_name, field.value() if field.value() is not none else '', "form-control", field.id_for_label, placeholder|default(field.help_text, true), attrs=attrs, kwargs=kwargs) }}
            {{ field_error(field) }}
        </div>
    {% endif %}
{%- endmacro %}


{% macro segment_input(name,value) %}
    <div class="form-group">
        <input class="form-control" type="text" id="id_{{ name }}" name="{{ name }}" value="{{ value }}"
               placeholder="{{ value }}">
    </div>
{% endmacro %}

{% macro segment_template(start, end, lable_info) -%}
    <div>
        <label class="col-sm-2 control-label">开始时间:</label><input name='start_time' type="text" value="{{ start }}">秒
        <span>结束时间:</span><input name='end_time' type="text" value="{{ end }}">秒
        <span>标签信息:</span><input name='label_info' type="text" value="{{ lable_info }}">
        <button type="button" class="btn btn-primary btn-segment-delete">删除</button>
    </div>
{%- endmacro %}

{% block form_body %}

    <form id="index_form" name="index_form" action='#'
          role="form" method="post" class="form-horizontal"
          enctype="multipart/form-data">

        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        {% if action %}
            <input hidden name="pic_id" value="{{ pic_id }}">
            <input hidden name="action" value="{{ action }}">
        {% endif %}

        <div class="row">
            <div class="col-sm-12">


                <div class="panel panel-default">
                    <div class="panel-body">
                        {% if form.non_field_errors() %}
                            <div class="alert alert-danger"
                                 role="alert">{{ form.non_field_errors()|join('|') }}</div>{% endif %}

                        {% set messages = get_messages(request) %}
                        {% if messages %}
                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                {{ messages|join('|') }}
                            </div>
                        {% endif %}


                        <div class="row col-sm-12">

                            <div class="col-sm-6">

                                <h4>基本信息</h4>
                                <div class="form-group">
                                    {{ form_input(form.name, "col-sm-3 control-label", "col-sm-6") }}
                                </div>

                                <div class="form-group">
                                    {{ form_input(form.description, "col-sm-3 control-label", "col-sm-6") }}
                                </div>

                                <div class="form-group">
                                    {{ form_input(form.status, "col-sm-3 control-label", "col-sm-6", "") }}
                                </div>

                            </div>


                            <div class="col-sm-6">
                                <h4>上传图片：
                                    {% if form.path.value() %}
                                        <a href="{{ form.path.value() }}">点击下载</a>
                                    {% else %}
                                        <label>未上传</label>
                                    {% endif %}
                                </h4>
                            </div>

                            <div class="col-sm-6">


                                <h4>添加不靠谱图片</h4>
                                <input style="width:200px;height: 200px;" id="bkp_pic_uploader" name="bkp_pic_bp"
                                       type="file">

                            </div>


                        </div>

                        <div class="row col-sm-12">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                ＋添加目标
                            </button>
                            <table class="table table-striped table-bordered table-hover" id="target_table">
                                <thead>
                                <tr>
                                    <th style="width:80px;">序号</th>
                                    <th>目标名称</th>
                                    <th colspan="2">左上坐标</th>
                                    <th colspan="2">右下坐标</th>
                                    <th colspan="2">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for seg in  segments %}
                                    <tr id="id_{{ seg.id }}">
                                        <td></td>
                                        <td>{{ segment_input('target_name',seg.name) }}</td>
                                        <td>{{ segment_input('top_left_x',seg.top_left_x) }}</td>
                                        <td>{{ segment_input('top_left_y',seg.top_left_y) }}</td>
                                        <td>{{ segment_input('bottom_right_x',seg.bottom_right_x) }}</td>
                                        <td>{{ segment_input('bottom_right_y',seg.bottom_right_y) }}</td>
                                        {#                                        <td><a type="button" class="btn ">复制</a> </td>#}
                                        <td>
                                            <a type="button" class="btn "
                                               onclick="del_target('id_'+'{{ seg.id }}');">删除</a>
                                        </td>
                                    </tr>

                                {% endfor %}

                                </tbody>
                            </table>
                            <div class="col-lg-12 col-lg-offset-5">

                                <button type="submit" class="btn btn-primary sm-lg-4">保存</button>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>

    <style>
        .model_title {
            text-align: center;
            font-style: inherit;
            color: #ffffff;
            font-size: 18px;
            background: #3c8dbc;
            -webkit-border-radius: 20px 20px 0px 0px;
            -moz-border-radius: 20px 20px 0px 0px;
            border-radius: 20px 20px 0px 0px;
        }
    </style>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content" style="    border-radius: 20px;">
                <div class="modal-header model_title">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加目标
                    </h4>
                </div>
                <div class="modal-body">
                    {#                    添加目标弹窗内容#}
                    <form id="model_form"
                          role="form" method="post" class="form-horizontal"
                          enctype="multipart/form-data">


                        {#                        <h4>基本信息</h4>#}
                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.target_name, "col-sm-2 control-label", "col-sm-3") }}

                            </div>
                        </div>
                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.top_left_x, "col-sm-2 control-label", "col-sm-3") }}
                                {{ form_input(form.top_left_y, "col-sm-2 control-label", "col-sm-3") }}
                            </div>
                        </div>

                        <div class="row" style="padding: 10px 0px 10px 0px;">
                            <div class="form-group">
                                {{ form_input(form.bottom_right_x, "col-sm-2 control-label", "col-sm-3") }}
                                {{ form_input(form.bottom_right_y, "col-sm-2 control-label", "col-sm-3") }}
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"
                            onclick="getFormInfo('model_form')">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


{% endblock form_body %}

{% block body_js %}
    <script src="{{ static('js/fileinput.js') }}"></script>
    <script src="{{ static('js/fileinput_locale_zh.min.js') }}"></script>
    {#    常用数据处理函数#}
    <script src="{{ static('js/util.js') }}"></script>

    <script>
        {#    本页面逻辑处理函数#}
        $('#myModal').on('show.bs.modal', function () {
{#            var form_target = $('form');#}
{#            form_target.data('bootstrapValidator').destroy();#}
{#            form_target.data('bootstrapValidator', null);#}
            init_valid('model_form');

            alert('reload done');
        });

    </script>

    <script>
        {#    页面初始化－－初始化上传插件#}
        $(document).ready(function () {
            initFileInput("bkp_pic_uploader", "/User/EditPortrait");
            auto_add_table_id();
            {#            active_valid();#}
{#            init_valid('index_form');#}
            {#            init_valid('model_form');#}
        });
    </script>

    <script>
        function del_target(id) {
            $('#' + id).remove();
            auto_add_table_id('');
        }

        {#            <input class="form-control" type="text" id="id_target_name" name="target_name" value="" placeholder="">#}
        function getFormInfo(formid) {
            var params = getElements(formid);
            var tr_string = '<tr><td>id</td>';
            for (var i = 0; i < params.length; i++) {
                tr_string += '<td>';
                tr_string += '<div class="form-group" >';
                tr_string += ('<input class="form-control" type="text" id=' + params[i].name);
                tr_string += ('   name=' + params[i].name);

                if (params[i].value != '') {
                    tr_string += ('   value=' + params[i].value);
                    tr_string += ('   placeholder=' + params[i].value);
                } else {
                    tr_string += ('   value="" ');

                    tr_string += ('   placeholder="" ' );

                }
                tr_string += (' >');
                tr_string += '</div>';
                tr_string += '</td>';
                {#                alert(params[i].name + '---' + params[i].value);#}
            }
            {#            <a type="button" class="btn ">复制</a>#}
            {#            tr_string += '<td><a type="button" class="btn ">复制</a></td>';#}
            tr_string += '<td><a type="button" class="btn btn-segment-delet">删除</a></td>';
            {#            alert(tr_string);#}
            add_table_tr('target_table', tr_string);
            auto_add_table_id();
            active_valid();
        }
    </script>

    <script type="text/html" class="segment-html">
        <div>
            <label class="col-sm-2 control-label">目标名称:</label>
            <input name='name' type="text">
            <label class="col-sm-2 control-label">左上目标:</label>

            <input name='top_left_x' class="col-sm-1" value="" type="text">
            <input name='top_left_y' class="col-sm-1" value="" type="text">
            <label class="col-sm-2 control-label">标签信息:</label>
            <input name='bottom_right_x' class="col-sm-1" value="" type="text">
            <input name='bottom_right_y' class="col-sm-1" value="" type="text">
            <button type="button" class="btn btn-primary btn-segment-delete">复制</button>
            <button type="button" class="btn btn-primary btn-segment-delete">删除</button>
        </div>
    </script>


    <script type="text/javascript">
        $(".btn-segment-delete").on("click", function () {
            {#            $(this).parent().remove();#}
            $(this).remove();
        });
        $('#btn-add-segment').click(function () {
            $('#add-new-segment').append($('.segment-html').html());
            $(".btn-segment-delete").on("click", function () {
                $(this).parent().remove();
            });
        });
    </script>

{% endblock %}
